<template>
<div class="title-bar">
  <div class="text-wrapper">
    <span class="text">
      {{ title }}
    </span>
  </div>
  <div class="animation-bar-wrapper">
    <div class="animation-bar"></div>
  </div>
</div>
</template>

<script>
export default {
  name: 'TitleBar',
  props: {
    title: String,
  },
}
</script>
<style scoped lang="scss">
$ratio: 1.875;

.title-bar {
  // width: 100%;
  height: 100%;
  background: url(../assets/icons/title-bar.png) no-repeat;
  background-size: 100% auto;
  background-position: center bottom;
  display: flex;
  align-items: center;
  // padding-bottom: 8px;
  padding-bottom: calc(15px / $ratio);

  .text-wrapper {
    // 通过整体调整
    flex-basis: 124px;

    &>.text {
      margin-left: auto;
      display: block;
      width: max-content;
      margin-right: calc(20px / $ratio);
      font-family: Microsoft YaHei;
      font-weight: bold;
      // font-size: calc(30px / $ratio);
      font-size: 16px;
      color: #73bfff;
      text-shadow: 0px 2px 4px rgba(98, 248, 221, 0.3);
      background: linear-gradient(179deg, #ffffff 14%, #65ffe3 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      position: relative;

      &::before {
        content: ' ';
        position: absolute;
        inset: 0;
        background-image: linear-gradient(45deg,
            rgba(255, 255, 255, 0) calc(var(--number-0-1) * 120% - 20%),
            rgba(255, 255, 255, 1) calc(var(--number-0-1) * 120% - 10%),
            rgba(255, 255, 255, 0) calc(var(--number-0-1) * 120% - 0%));
        filter: blur(2px);
      }
    }
  }

  .animation-bar-wrapper {
    flex-grow: 1;

    &>.animation-bar {
      height: 2px;
      background: linear-gradient(to right,
          rgba(239, 154, 77, 1) 0%,
          rgba(239, 154, 77, 0) 100%);
      animation: animateIcon 3s linear infinite;
      transform-origin: left;
    }

    @keyframes animateIcon {
      0% {
        transform: scaleX(0);
      }

      100% {
        transform: scaleX(1);
      }
    }
  }
}
</style>
